<template>
	
	<li>
		<div class="transform-tile">
			<div class="icon" @click="OnLiExpand">
				<CaretBottom v-show="isExpandForLiContent" />
				<CaretRight v-show="!isExpandForLiContent"/>
			</div>
			<div class="txt">基本变换</div>
			<div class="check"></div>
		</div>
		<div class="transform-content" v-show="isExpandForLiContent">
			<div class="c-row">
				<div class="t">移动:</div>
				<div class="i" style="color: transparent;">
					<Unlock/>
				</div>
				<div class="x-t">
					X
				</div>
				<div class="x">
					  <el-input-number
						v-model="Pos_x"
					    controls-position="right"
					    size="small"
						@change="handlePos_X"
					  />
					
				</div>
				<div class="y-t">
					Y
				</div>
				<div class="y">
					<el-input-number
					  v-model="Pos_y"
					  controls-position="right"
					  size="small"
					  @change="handlePos_Y"
					/>
				</div>
				<div class="z-t">
					Z
				</div>
				<div class="z">
					<el-input-number
					  v-model="Pos_z"
					  controls-position="right"
					  size="small"
					  @change="handlePos_Z"
					/>
				</div>
			</div>
			<div class="c-row">
				<div class="t">旋转:</div>
				<div class="i" style="color: transparent;">
					<Unlock/>
				</div>
				<div class="x-t">
					X
				</div>
				<div class="x">
					  <el-input-number
					    v-model="Rota_x"
					    controls-position="right"
					    size="small"
						@change="handleRota_X"
					  />
					
				</div>
				<div class="y-t">
					Y
				</div>
				<div class="y">
					<el-input-number
					  v-model="Rota_y"
					  controls-position="right"
					  size="small"
					  @change="handleRota_Y"
					/>
				</div>
				<div class="z-t">
					Z
				</div>
				<div class="z">
					<el-input-number
					  v-model="Rota_z"
					  controls-position="right"
					  size="small"
					  @change="handleRota_Z"
					/>
				</div>
			</div>
			<div class="c-row">
				<div class="t">缩放:</div>
				<div class="i" @click="OnFixScale">
					<Unlock v-show="!isFixScale"/>
					<Lock v-show="isFixScale"/>
				</div>
				<div class="x-t">
					X
				</div>
				<div class="x">
					  <el-input-number
					    v-model="Sca_x"
						:min="0"
						:max="360"
					    controls-position="right"
					    size="small"
						 @change="handleSca_X"
					  />
					
				</div>
				<div class="y-t">
					Y
				</div>
				<div class="y">
					<el-input-number
					  :min="0"
					  :max="360"
					  v-model="Sca_y"
					  controls-position="right"
					  size="small"
					  @change="handleSca_Y"
					/>
				</div>
				<div class="z-t">
					Z
				</div>
				<div class="z">
					<el-input-number
					  :min="0"
					  :max="360"
					  v-model="Sca_z"
					  controls-position="right"
					  size="small"
					  @change="handleSca_Z"
					/>
				</div>
			</div>
		</div>
	</li>
</template>

<script setup lang="ts">
	
	import {
	  CaretRight,CaretBottom,Unlock,Lock
	} from '@element-plus/icons-vue'
	
	import { updateActor } from "@/api/scene";
	import { ref } from 'vue'
	const isExpandForLiContent = ref(true)
	const isFixScale = ref(false)
	
	const actorid= ref('')
	const Pos_x= ref(0.00)
	const Pos_y= ref(0)
	const Pos_z= ref(0)
	
	const Rota_x= ref(0)
	const Rota_y= ref(0)
	const Rota_z= ref(0)
	
	const Sca_x= ref(1)
	const Sca_y= ref(1)
	const Sca_z= ref(1)
	
	const handlePos_X = (value: number) => {
	  onChangeActor();
	}
	const handlePos_Y = (value: number) => {
	  onChangeActor();
	}
	const handlePos_Z = (value: number) => {
		onChangeActor();
	}
	const handleRota_X = (value: number) => {
	  onChangeActor();
	}
	const handleRota_Y = (value: number) => {
	  onChangeActor();
	}
	const handleRota_Z = (value: number) => {
	  onChangeActor();
	}
	const handleSca_X = (value: number) => {
		if(isFixScale.value){
			Sca_x.value=value
			Sca_y.value=value
			Sca_z.value=value
		}
		onChangeActor();
	}
	const handleSca_Y = (value: number) => {
	  if(isFixScale.value){
	  	Sca_x.value=value
	  	Sca_y.value=value
	  	Sca_z.value=value
	  }
	  onChangeActor();
	}
	const handleSca_Z = (value: number) => {
	  if(isFixScale.value){
	  	Sca_x.value=value
	  	Sca_y.value=value
	  	Sca_z.value=value
	  }
	  onChangeActor();
	}
	
	const OnFixScale=()=>{
		isFixScale.value=!isFixScale.value
		onChangeActor();
	}
	
	const OnLiExpand=()=>{
		isExpandForLiContent.value=!isExpandForLiContent.value
	}
	
	const setTransform=(id:string,transform:{})=>{
		actorid.value=id;
		if(transform && transform.position){
			Pos_x.value=transform.position.x;
			Pos_y.value=transform.position.y;
			Pos_z.value=transform.position.z;
		}else{
			Pos_x.value=0;
			Pos_y.value=0;
			Pos_z.value=0;
		}
		
		if(transform && transform.rotation){
			Rota_x.value=transform.rotation.x;
			Rota_y.value=transform.rotation.y;
			Rota_z.value=transform.rotation.z;
		}else{
			Rota_x.value=0;
			Rota_y.value=0;
			Rota_z.value=0;
		}
		
		if(transform && transform.scale){
			Sca_x.value=transform.scale.x;
			Sca_y.value=transform.scale.y;
			Sca_z.value=transform.scale.z;
		}else{
			Sca_x.value=1;
			Sca_y.value=1;
			Sca_z.value=1;
		}
	}
	
	const onChangeActor=()=>{
		updateActor({
			id:actorid.value,
			position:{
				x:Pos_x.value,
				y:Pos_y.value,
				z:Pos_z.value,
			},
			rotation:{
				x:Rota_x.value,
				y:Rota_y.value,
				z:Rota_z.value,
			},
			scale:{
				x:Sca_x.value,
				y:Sca_y.value,
				z:Sca_z.value,
			},
		})
		.then((res) => {
			if(res.code==200){
				ElMessage.success(res.message || '成功.');
			}else{
				ElMessage.error(res.message || '系统出错');
			}
		})
		.catch((e) => {
		})
		.finally(() => {
		});
		
	}
	
	
	defineExpose({
		setTransform
	});
	
</script>

<style  scoped>
	.transform-tile{
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
		height: 1.875rem;
		height: 30px;
		border-width: 1px 0 0 0;
		border-style: solid;
		border-color: #4e505c;
		background-color: #37383c;
		line-height: 100%;
		width: 100%;
		padding-top: 6px;
		padding-left: 6px;
		width: 100%;
		font-size: 0.75rem;
		>.icon{
			width: 16px;
			height: 16px;
		}
		>.txt{
			flex: 1;
			margin-left: 0.375rem;
			padding-top: 3px;
		}
		>.check{
			width: 6.25rem;
		}
	}
	.transform-content{
		flex: 1;
		height: 100%;
		width: 100%;
		margin-top: 5px;
		margin-bottom:5px;
		font-size: 0.75rem;
		>.c-row{
			height: 30px;
			padding-top: 5px;
			>.t{
				float: left;
				margin-left: 0.3125rem;
				margin-right: 4px;
			}
			>.i{
				width: 0.9375rem;
				float: left;
			}
			>.x-t{
				background-color: red;
				float: left;
				height: 24px;
				width: 14px;
				text-align: center;
				margin-top: -2px;
				padding-top: 2px;
			}
			>.y-t{
				background-color: green;
				float: left;
				height: 24px;
				width: 14px;
				text-align: center;
				margin-top: -2px;
				padding-top: 2px;
			}
			>.z-t{
				background-color: blue;
				float: left;
				height: 24px;
				width: 14px;
				text-align: center;
				margin-top: -2px;
				padding-top: 2px;
			}
			>.x{
				float: left;
				margin-top: -2px;
				margin-right: 5px;
			}
			>.y{
				float: left;
				margin-top: -2px;
				margin-right: 5px;
			}
			>.z{
				float: left;
				margin-top: -2px;
				margin-right: 5px;
			}
		}
	}
	
	
/deep/ .el-input-number--small {
	 width:  5rem;
	line-height: 22px;
	height: 24.5px;
}	

/deep/ .el-input-number.is-controls-right .el-input__wrapper {
	background: transparent;
	padding-left: 15px;
	padding-right: 42px;
	border-radius: 0px;
	color: #ccc;
}

/deep/ .el-input-number.is-controls-right .el-input-number__increase {
    border-radius: 0 ;
}
/deep/.el-input-number.is-controls-right .el-input-number__decrease {
    border-radius: 0;
}

/deep/ .el-input__inner {
    color: #ccc;
	outline-style: none ;
}

/deep/.el-input__wrapper {
    box-shadow: none;
	background-color: #272729;
	border: 1px solid #4d505d;
}

/deep/ .el-input-number__decrease, .el-input-number__increase {
	background:transparent;
	color: #ccc;
}

/deep/ .el-input-number__increase {
	background:transparent;
	color: #ccc;
}

/deep/.el-input-number__increase {
	border-left:1px solid #4d505d; 
	border-bottom:1px solid#4d505d;
    border-radius: 0;
}

/deep/.el-input-number__decrease {
    border-radius: 0;
	border-top:1px solid #4d505d; 
	border-left:1px solid #4d505d; 
	border-bottom:1px solid#4d505d;
}

/deep/ .el-input-number.is-controls-right .el-input-number__decrease {
  border-left:1px solid #4d505d; 
}
/deep/ .el-input-number.is-controls-right .el-input-number__increase {
	border-bottom:1px solid#4d505d;
}

</style>